<template>
    <!-- 封装分页组件 -->
    <div class="my-pagination">
        <!-- ant提供的分页器,显示快速跳转 -->
        <a-pagination
            show-quick-jumper
            :current="pageData.current"
            :default-current="pageData.current"
            :defaultPageSize="pageSize"
            :total="pageData.total"
            :disabled="loading"
            @change="onChange"
        />
    </div>
</template>

<script>
export default {
    name: "PaginationComponent",
    props:{
        // 分页器每页大小,默认每页10条数据
        pageSize:{
            type:Number,
            required: false,
            default:10,
        },
        // 后端返回的分页对象,包含了各种分页参数
        pageData:{
            type:Object,
            required:true
        },
        // 页面是否在加载中
        loading:{
            type:Boolean,
            required: false,
            default: false
        }
    },
    methods: {
        /**
         * 页码改变时,对路由进行操作
         * 主要是配合 LoadTopicPageDataMixin 混入对象使用
         * 通过设置路由中 query.page 参数更改当前页面页码,
         * 从而使混入对象重新加载分页数据
         */
        onChange(pageNumber) {
            // console.log('Page: ', pageNumber);
            // const route = this.$route
            // 路由的 路径,params 保持不变,query查询只重设page参数
            this.$router.replace({
                query:{
                    page:pageNumber,
                },
            })
        },
    },
}
</script>

<style lang="less" scoped>
.my-pagination{

}

</style>
